<template>
    <!-- 收藏夹组件 -->
    <view class="container" v-for="(item, index) in folderList" :key="index">
        <view class="left" @tap="toStarListItem(item)">
            <text class="title">{{ item.collectionName }}</text>
            <text class="sum">{{ item.contentCount }}篇</text>
        </view>
        <view class="right">
            <text class="iconfont icon-setting" @tap="open(item)"></text>
        </view>
    </view>
</template>
<script setup lang="ts">
import type { Folder } from '@/type/favorite';

const props = defineProps({
    folderList: {
        //类型todo
        type: Array<Folder>,
        default: []
    },
    type: {
        type: Number,
        default: -1
    }
});
const emit = defineEmits(['open']);
const open = (item: Folder) => {
    emit('open', item);
}
//todo:item类型
const toStarListItem = (item: Folder) => {
    const folder = {
        id: item.id,
        title: item.collectionName,
        type: props.type
    }
    uni.navigateTo({ url: `/my_modules/starRecordItem/starRecordItem?folder=` + encodeURIComponent(JSON.stringify(folder)) })
}
</script>
<style scoped lang="scss">
.container {
    padding: 30rpx 60rpx;
    display: flex;
    justify-content: space-between;
    border: 1rpx solid #ddd;
    background-color: #fff;

    .left {
        flex: 5;
        display: flex;
        flex-direction: column;

        .title {
            font-size: 34rpx;
            color: $color-title;
            margin-bottom: 10rpx;
        }

        .sum {
            font-size: 30rpx;
            color: #666;
        }
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .iconfont {
            font-size: 45rpx;
            color: $color-title;
        }
    }
}
</style>
